<template>
    <el-card>
        <template #header>
            <div class='card-header'>
                <span>添加检测站</span>
            </div>
        </template>

        <el-steps
            :active='active'
            finish-status='success'
            process-status='process'
            align-center
            style='margin-top: 20px;margin-bottom: 20px;'
        >
            <el-step title='检测站信息' />
            <el-step title='创建管理员账号' />
            <el-step title='成功' />
        </el-steps>
        <el-row>
            <el-col :span='20' :offset='2'>
                <el-form
                    v-if='active == 0'
                    ref='formRef'
                    :model='form'
                    :rules='rules'
                    label-width='120px'
                >
                    <el-form-item label='检测站名称' prop='name'>
                        <el-input v-model='form.name' />
                    </el-form-item>

                    <el-form-item label='CMA' prop='cma'>
                        <el-input v-model='form.cma' />
                    </el-form-item>

                    <el-form-item label='公司地址' prop='address'>
                        <el-input v-model='form.address' />
                    </el-form-item>

                    <el-form-item label='联系人' prop='lxr'>
                        <el-input v-model='form.lxr' />
                    </el-form-item>

                    <el-form-item label='联系电话' prop='phone'>
                        <el-input v-model='form.phone' />
                    </el-form-item>

                    <el-form-item label='公章图片' prop='image'>
                        <el-upload
                            ref='upload'
                            class='avatar-uploader'
                            action='#'
                            :show-file-list='false'
                            :on-change='upLoadFun'
                            :auto-upload='false'
                        >
                            <el-button type='primary' v-if='form.image == ""'>点击上传</el-button>
                            <el-button type='primary' v-else>已选择-点击重新选择</el-button>
                        </el-upload>
                    </el-form-item>

                </el-form>

                <el-form
                    v-if='active==1'
                    ref='userFormRef'
                    :model='user'
                    :rules='userRules'
                    label-width='120px'
                >
                    <el-form-item label='用户名' prop='user'>
                        <el-input v-model='user.user' />
                    </el-form-item>

                    <el-form-item label='密码' prop='password'>
                        <el-input v-model='user.password' />
                    </el-form-item>
                </el-form>
                <el-button v-if='active<=1' type='primary' @click='next'>{{ active == 0 ? '下一步' : '提交' }}</el-button>

                <el-result
                    v-if='active==2'
                    icon='success'
                    title='添加成功'
                    sub-title='检测站添加成功'
                >
                    <template #extra>
                        <el-button type='primary' @click='active = 0'>返回</el-button>
                    </template>
                </el-result>

            </el-col>
        </el-row>

    </el-card>


</template>

<script lang='ts'>
import { defineComponent, reactive, ref } from 'vue'
import { ICheckTableList } from '/@/type/views/Check/CheckList'
import type { ElForm } from 'element-plus'
// 网络请求
import { CheckAndUserAdd } from '/@/api/Check'
import { validate } from '/@/utils/formExtend'
import { ElNotification } from 'element-plus'
import router from '/@/router'
import { loginParam } from '/@/api/layout'
import { ICheckForm } from '/@/type/views/Check/CheckAdd'

type FormInstance = InstanceType<typeof ElForm>

// 添加委托单位和管理员账号
const addClientUser = async(form: { check: ICheckForm, user: loginParam }) => {
    const res = await CheckAndUserAdd(form)
    ElNotification({
        title: '成功',
        message: res.data.message,
        type: 'success'
    })
    await router.push('/Check/CheckList')
    return true
}

const add = (form: ICheckForm, user: loginParam) => {
    const formRef = ref<FormInstance>()
    const userFormRef = ref<FormInstance>()
    const active = ref(0)
    const rules = reactive({
        name: [
            { required: true, message: '请输入检测站名称', trigger: 'blur' }
        ],
        cma: [
            { required: true, message: '请输入联系人', trigger: 'blur' }
        ],
        image: [
            { required: true, message: '请选择公章图片', trigger: 'blur' }
        ]
    })
    const userRules = reactive({
        user: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
        ]
    })

    const next = async() => {
        switch (active.value) {
        case 0:
            if (!await validate(formRef)) return
            active.value = 1
            break
        case 1:
            if (!await validate(userFormRef)) return
            // 提交
            const res = await addClientUser({ check: form, user: user })
            active.value = 2
            break
        default:
            break
        }
    // addClient(form)
    }

    return { rules, formRef, userFormRef, next, active, userRules }
}

export default defineComponent({
    name: 'ClientAdd',
    components: {},
    setup() {
        const form: ICheckTableList = reactive({
            name: '',
            cma: '',
            address: '',
            lxr: '',
            phone: '',
            image: ''
        })

        const user:loginParam = reactive({
            user: '',
            password: ''
        })
        const upload = ref()

        const upLoadFun = (file,fileList) => {
            let reader = new FileReader()
            reader.readAsDataURL(file.raw)
            reader.onload = () => {
                form.image = reader.result
                // console.log(reader.result)
            }
        }

        return {
            form,
            user,
            ...add(form, user),
            upload,
            upLoadFun
            // ...tableRender(tableData, form),
            // ...search(tableData, form)
        }
    }
})
</script>
